<template>
  <view v-if="!isLoading" class="container b-f">

    <!-- 头部背景图 -->
    <view class="dealer-bg">
      <image class="image" mode="widthFix" :src="background"></image>
    </view>

    <view class="widget-body">
      <form @submit="handleSubmit">
        <!-- 提现佣金 -->
        <view class="widget widget__capital m-top20 b-f dis-flex flex-dir-column">
          <view class="capital__item dis-flex flex-x-between flex-y-center">
            <view class="item__left">{{ words.capital.value }}：</view>
            <view class="item__right c-violet">
              <text class="f-24">￥</text>
              <text class="f-34">{{ dealer.money }}</text>
            </view>
          </view>
          <view class="capital__item dis-flex flex-y-center">
            <view class="item__left">{{ words.money.value }}：</view>
            <view class="item__right flex-box">
              <input v-model="valueMoney" class="input" name="money" :placeholder="words.money_placeholder.value" @input="calculate"/>
            </view>
          </view>
        </view>
        <!-- 最低提现金额 -->
        <view v-if="this.valueMoney==''" class="capital__lowest m-top20 col-7 t-r">
          {{ words.min_money.value }}{{ settlement.min_money }}元
        </view>
        <view v-if="this.valueMoney!=''" class="capital__lowest m-top20 col-7 t-r">
          实际到账金额{{ toMoney }}元
        </view>
        <view v-if="settlement.float_points && this.valueMoney!=''" class="capital__lowest m-top20 col-7 t-r">
          本次转积分{{ toPoints }}元
        </view>
        <view v-if="settlement.float_money && this.valueMoney!=''" class="capital__lowest m-top20 col-7 t-r">
          {{ words.float_money.value }}{{ floatMoney }}元
        </view>
        <!-- 提现方式 -->
        <view class="widget widget__form m-top20 b-f dis-flex flex-dir-column">
          <view class="form__title f-28">提现方式</view>
          <view class="form__box">
            <block v-for="(item, index) in settlement.pay_type" :key="index">
              <block v-if="item == PayTypeEnum.WECHAT.value">
                <!-- 微信支付 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.WECHAT.value)">
                    <text class="radio__icon iconfont icon-radio"
                          :class="[payment == PayTypeEnum.WECHAT.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.WECHAT.name }}</text>
                  </view>
                </view>

                <block v-if="payment == PayTypeEnum.WECHAT.value">
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="weixin_name" placeholder="请输入真实姓名" />
                    </view>
                  </view>
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="weixin_account" placeholder="请输入微信收款账号" />
                    </view>
                  </view>
                </block>

              </block>
              <block v-if="item == PayTypeEnum.ALIPAY.value">
                <!-- 支付宝 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.ALIPAY.value)">
                    <text class="radio__icon iconfont icon-radio"
                          :class="[payment == PayTypeEnum.ALIPAY.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.ALIPAY.name }}</text>
                  </view>
                </view>
                <block v-if="payment == PayTypeEnum.ALIPAY.value">
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="alipay_name" placeholder="请输入真实姓名" />
                    </view>
                  </view>
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="alipay_account" placeholder="请输入支付宝账号" />
                    </view>
                  </view>
                </block>
              </block>
              <block v-if="item == PayTypeEnum.BANK_CARD.value">
                <!-- 银行卡 -->
                <view class="form__field dis-flex flex-y-center">
                  <view class="form__radio dis-flex flex-y-center" @click="handleChecked(PayTypeEnum.BANK_CARD.value)">
                    <text class="radio__icon iconfont icon-radio"
                          :class="[payment == PayTypeEnum.BANK_CARD.value ? 'c-violet' : 'col-bb']"></text>
                    <text class="f-28">{{ PayTypeEnum.BANK_CARD.name }}</text>
                  </view>
                </view>
                <block v-if="payment == PayTypeEnum.BANK_CARD.value">
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="bank_name" placeholder="请输入真实姓名" />
                    </view>
                  </view>
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="bank_account" placeholder="请输入开户行名称/地址" />
                    </view>
                  </view>
                  <view class="form__field">
                    <view class="field-input">
                      <input class="input" name="bank_card" placeholder="请输入银行卡号" />
                    </view>
                  </view>
                </block>
              </block>
            </block>
          </view>
        </view>
        <!-- 提交申请 -->
        <view class="form-submit dis-flex flex-x-center">
          <button formType="submit" :disabled="disabled">{{ words.submit.value }}</button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
import * as DealerApi from '@/api/dealer'
import * as WithdrawApi from '@/api/dealer/withdraw'
import SettingModel from '@/common/model/dealer/Setting'
import { PayTypeEnum } from '@/common/enum/dealer/withdraw'

export default {
  data() {
    return {
      // 枚举类
      PayTypeEnum,
      // 正在加载
      isLoading: true,
      // 分销商用户信息
      dealer: undefined,
      // 当前提现方式(选中的)
      payment: undefined,
      // 分销结算设置
      settlement: undefined,
      // 文字设置
      words: undefined,
      // 背景图
      background: undefined,
      // 按钮禁用
      disabled: false,
      //提现金额
      valueMoney: '',
      //手续费
      floatMoney: 0,
      //实际到账金额
      toMoney: 0,
      //转积分
      toPoints: 0
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSetting()
    this.getDealer()
  },

  methods: {

    // 获取分销设置
    getSetting() {
      const app = this
      SettingModel.data()
          .then(setting => {
            // 赋值属性
            app.payment = setting.settlement.pay_type[0]
            app.settlement = setting.settlement
            app.words = setting.words.withdraw_apply.words
            app.background = setting.background.withdraw_apply
            // 设置当前页面标题
            app.setPageTitle(setting.words.withdraw_apply.title)
          })
    },

    //计算手续费
    calculate(event) {
      this.toPoints = Number(this.valueMoney)*this.settlement.float_points/100; //积分
      this.floatMoney = Number(this.valueMoney)*this.settlement.float_money/100; //手续费
      this.toMoney = Number(this.valueMoney)-this.toPoints-this.floatMoney; //到账金额

    },

    // 获取分销商
    getDealer() {
      const app = this
      app.isLoading = true
      DealerApi.user()
          .then(result => app.dealer = result.data.dealer)
          .finally(() => app.isLoading = false)
    },

    // 设置当前页面标题
    setPageTitle(title) {
      uni.setNavigationBarTitle({ title: title.value })
    },

    // 切换支付选项
    handleChecked(value) {
      this.payment = value
    },

    // 表单提交
    handleSubmit({ detail }) {
      const app = this
      // 表单验证
      if (!app.onValidation(detail.value)) {
        return false
      }
      // 确认是否提交
      uni.showModal({
        title: '友情提示',
        content: '确定提交提现申请吗？请确认填写无误',
        showCancel: true,
        success(res) {
          if (res.confirm) {
            app.onSubmit(detail.value)
          } else if (res.cancel) {
            app.disabled = false
          }
        }
      })
    },

    // 提交提现申请
    onSubmit(data) {
      const app = this
      app.disabled = true
      data.pay_type = app.payment
      WithdrawApi.submit({ form: data })
          .then(result => {
            app.$toast(result.message)
            setTimeout(() => uni.navigateBack(), 1200)
          })
          .finally(() => app.disabled = false)
    },

    // 表单验证
    onValidation(data) {
      const app = this
      const words = app.words
      // 验证可提现佣金
      if (app.dealer.money <= 0) {
        app.$error('当前没有' + words.capital.value)
        return false
      }
      // 验证提现金额
      if (!data.money || data.money.length < 1) {
        app.$error('请填写' + words.money.value)
        return false
      }
      return true
    }

  }
}
</script>

<style>
page {
  background: #fff;
}
</style>
<style lang="scss" scoped>
.input {
  display: block;
}

.c-violet {
  color: #786cff;
}

.col-bb {
  color: #bbb;
}

.dealer-bg {
  .image {
    width: 100%;
  }
}

.widget-body {
  position: relative;
  width: 88%;
  margin: 0 auto;

  .widget {
    box-sizing: border-box;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.11);
    border-radius: 12rpx;
  }
}

// 提现金额
.widget__capital {
  padding: 10rpx 0;
  margin-top: -60rpx;

  .capital__item {
    height: 80rpx;
    padding: 10rpx 35rpx;
    font-size: 28rpx;
    border-bottom: 1rpx solid #e7e7e7;
    box-sizing: border-box;

    &:last-child {
      border-bottom: none;
    }

    .item__left {
      margin-right: 20rpx;
    }

    .item__right {
      .input {
        font-size: 28rpx;
        text-align: right;
      }
    }
  }
}

.capital__lowest {
  padding-right: 20rpx;
  box-sizing: border-box;
  font-size: 26rpx;
}

// 提现方式
.widget__form {
  padding: 10rpx 0 20rpx 0;

  .form__title {
    padding: 16rpx 35rpx;
    border-bottom: 1rpx solid #f3f3f3;
  }

  .form__box {
    padding: 20rpx 35rpx;
  }

  .form__field {
    height: 80rpx;
    padding: 0;
    box-sizing: border-box;
    font-size: 28rpx;
    margin-bottom: 10rpx;

    .radio__icon {
      font-size: 38rpx;
      margin-right: 12rpx;
    }

    .field-input {
      .input {
        background-color: #f9f9f9;
        padding: 16rpx 20rpx;
        font-size: 28rpx;
      }
    }
  }
}

// 提交申请
.form-submit {
  margin-top: 40rpx;

  button {
    font-size: 30rpx;
    background: #786cff;
    border: 1rpx solid #786cff;
    color: white;
    border-radius: 50rpx;
    padding: 0 120rpx;
  }

  button[disabled] {
    background: #8e84fc;
    border-color: #8e84fc;
    color: white;
  }
}
</style>
